<template>
	新闻列表
	  <el-table :data="tableData" style="width: 100%">
	    <el-table-column prop="id" label="ID"  />
	    <el-table-column prop="category" label="分类"  />
	    <el-table-column prop="title" label="标题" />
	    <el-table-column prop="pubTime" label="发布时间" />
	    <el-table-column prop="author" label="作者" />
	    <el-table-column prop="readTimes" label="浏览量" /> 
		<el-table-column  label="操作" >
			<template #default="scope">
				<el-button type="success" @click="show(scope.row.id)">查看</el-button>
				<el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
				<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
			</template>
			
		</el-table-column>
	  </el-table>
</template>

<script>
	import axios from 'axios'
	axios.defaults.baseURL='/api'
	import { ElMessage, ElMessageBox } from 'element-plus'
	export default{
		data() {
			return {
				tableData:[]
			}
		},
		methods:{
			//查看按钮
			show(id){
				this.$router.push('/newsDetail/'+id)
			},
			//编辑按钮
			edit(id){
				this.$router.push('/newsEdit/'+id)
			},
			//删除按钮
			del(id){
				ElMessageBox.confirm(
				    '你确定要删除吗?',
				    '删除新闻',
				    {
				      confirmButtonText: '确定',
				      cancelButtonText: '取消',
				      type: 'warning',
				    }
				  )
				    .then(() => {
						//调用后台删除接口
						axios.delete('news?id='+id)
						.then(response => {
							if(response.data){
								//重新加载表格
								axios.get('news').then(response => {
									this.tableData = response.data
								})
								ElMessage({
								  type: 'success',
								  message: '删除成功',
								})
							}
						})
				      
				    })
				    .catch(() => {
				      ElMessage({
				        type: 'info',
				        message: '已取消',
				      })
				    })
			}
		},
		mounted() {
			//加载表格数据
			axios.get('news').then(response => {
				this.tableData = response.data
			})
		}
	}
</script>

<style>
</style>